<template>
  <div class="mv-detail" v-if="mvDetailInfo">
    <header>
      <a href="#">
        <el-icon><arrow-left /></el-icon>
      </a>
      <span class="mv-title">{{ isMv ? 'MV' : 'Video' }}</span>
      <span style="font-size: 16px; margin-right: 5px">{{
        mvDetail.name || mvDetail.title
      }}</span>
      <span
        style="font-size: 13px"
        v-if="mvDetail.artists && mvDetail.artists.length > 0"
        >{{ mvDetail.artists[0].name }}</span
      >
      <span
        style="font-size: 13px"
        v-if="mvDetail.creator && mvDetail.creator.nickname"
        >{{ mvDetail.creator.nickname }}</span
      >
      <span
        style="font-size: 13px"
        v-if="mvDetail.artists && mvDetail.artists.length > 1"
        >{{ mvDetail.artists[0].name }}/{{ mvDetail.artists[1].name }}</span
      >
    </header>
    <video
      controls
      autoplay
      muted
      loop
      style="width: 99%; margin: 20px 0"
      id="myvideo"
      :src="playUrl"
    >
      <p>对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器</p>
    </video>
    <el-button size="small" :icon="Pointer"
      >赞({{ mvDetailInfo.likedCount }})</el-button
    >
    <el-button size="small" :icon="Star"
      >收藏({{ mvDetail.subCount || mvDetail.commentCount }})</el-button
    >
    <el-button size="small" :icon="Share"
      >分享({{ mvDetail.shareCount }})</el-button
    >
    <el-button size="small" :icon="Download">下载MV</el-button>
    <a
      href="#"
      style="
        color: #888;
        font-size: 13px;
        text-decoration: underline;
        float: right;
        margin-right: 5px;
      "
      >举报</a
    >
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { useStore } from 'vuex'
import { Pointer, Star, Share, Download } from '@element-plus/icons-vue'
import { getMvDetail, getMvDetailInfo, getMvUrl } from '@/service/mvvideo'
import { getViDetail, getViDetailInfo, getViUrl } from '@/service/videoplay'

const store = useStore()
const props = defineProps({
  mvid: {
    type: [Number, String],
    required: true
  },
  isMv: {
    type: Boolean,
    default: true
  }
})
if (props.isMv) {
  getDetail(Number(props.mvid))
} else {
  getVDetail(String(props.mvid))
}

const mvDetail = ref()

// 获取mv详情
function getDetail(id: number) {
  getMvDetail(id).then((res: any) => {
    mvDetail.value = res.data
    store.commit('mv/fillTopMenu', res.data)
    getUrl(id)
    getDetailInfo(id)
  })
}
function getVDetail(id: string) {
  getViDetail(id).then((res: any) => {
    mvDetail.value = res.data
    store.commit('mv/fillTopMenu', res.data)
    getVUrl(id)
    getVDetailInfo(id)
  })
}
// 获取点赞信息
const mvDetailInfo = ref()
function getDetailInfo(id: number) {
  getMvDetailInfo(id).then((res: any) => {
    mvDetailInfo.value = res
    store.commit('mv/fillDetailInfo', res)
  })
}
function getVDetailInfo(id: string) {
  getViDetailInfo(id).then((res: any) => {
    mvDetailInfo.value = res
    store.commit('mv/fillDetailInfo', res)
  })
}
// 获取mv播放地址
const playUrl = ref()
function getUrl(id: number) {
  getMvUrl(id).then((res: any) => {
    playUrl.value = res.data.url
  })
}
function getVUrl(id: string) {
  getViUrl(id).then((res: any) => {
    playUrl.value = res.urls[0].url
  })
}
</script>

<style scoped>
.mv-title {
  border: 1px solid red;
  padding: 3px 4px;
  font-size: 13px;
  color: red;
  margin: 0 5px;
}
</style>
